<template>
   <div>
      <div>
        <scroller ref="groupScroller" class="back-div"
          :on-refresh="refreshGroup"
          :on-infinite="infiniteGroup">
          <div v-for="group in groupList" :key="group.id" class="out-box">
            <router-link :to="{ path: '/activity/groupIntro', query: { id: group.id }}">
              <div>
                <div class='title'>{{ group.groupName }}</div>
                <div>
                  <img :src=(group.groupLogo) style="width:100%;height:150px">
                </div>
                <div style="font-size: 12px;color:#C2C2C2;padding-top: 3px;">{{ group.groupIntro }}</div>
              </div>
            </router-link>
          </div>
        </scroller>
      </div>
   </div>
</template>

<script>

import { Grid, GridItem } from 'vux'
import { getCustomerId } from '../utils/utils'
import { getAuthInfo } from '../utils/common'

export default {
  components: {
    Grid, GridItem
  },
  data () {
    return {
      groupList: [],
      currentPage: '0',
      categoryId: '',
      noData: '',
      customerid: getCustomerId()
    }
  },
  mounted: function () {
    console.log('团队数据请求参数')
    console.log(this.$router.currentRoute.query.id)
    this.categoryId = this.$router.currentRoute.query.id
    this.top = 1
    this.bottom = 5
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  created: function () {
    getAuthInfo('home')
  },
  methods: {
    refreshGroup: function (done) {
      console.log('下拉刷新团队数据')
      console.log('refreshGroup')
      var self = this
      this.noData = true
      setTimeout(() => {
        self.groupList = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'categoryId': self.categoryId,
            'currentPage': '0',
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/interestGroup/list', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.groups.length)
          console.log(response.data.pagination.currentPage)
          self.currentPage = response.data.pagination.currentPage + 1
          var groupList = response.data.data.groups
          self.groupList = groupList
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteGroup: function (done) {
      console.log('上拉加载团队数据')
      console.log('infiniteGroup')
      var self = this
      if (this.noData) {
        console.log(this.noData)
        this.noData = false
        self.$refs.groupScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'categoryId': self.categoryId,
            'currentPage': self.currentPage,
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/interestGroup/list', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noData = '没有更多数据'
            self.$refs.groupScroller.finishInfinite(true)
            return
          }
          var groupData = response.data.data.groups
          console.log(groupData)
          var start = groupData.length
          console.log(start)
          for (var i = 0; i < start; i++) {
            console.log(groupData[i])
            self.groupList.push(groupData[i])
          }
          self.bottom = self.bottom + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.back-div{
  background-color: #fbf9fe;
}
.out-box{
  background-color: #FFFFFF;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 10px;
}
.weui-grid {
  position: relative;
  float: left;
  padding: 5px !important;
  width: 100%;
  box-sizing: border-box;
}
.activity-info{
  text-align:center;
  background-position: center;
  height: 128px;
  line-height:128px; 
  color: #10c5b6;
  background-attachment: fixed;
  background-repeat:no-repeat; 
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}
.title{
  margin-bottom: 5px;
  font-size: 16px;
  color: #333;
}
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

.participate-img li{
  width:20px;
  height:20px;
  float:left;
  display:inline;
  margin-left:5px;
}

.participate-img li img{
  width:20px;
  height:20px;
  border-radius: 50%;
}
</style>
